<template>
  <div class="collapse-box">
    <div class="collapse" @click="showFeildBox">
      {{ sheet.showName }}
      <div class="more">
        <img src="@/assets/image/common/更多.png" @click.stop="showMore" />
        <div class="moreBox" v-show="moreBoxShow">
          <div @click="showChangeSheetName">修改表名</div>
          <div @click="showRemoveSheet">删除表格</div>
          <div @click="showFilterSheet">过滤表格</div>
        </div>
      </div>
    </div>
    <div class="fieldBox" v-show="fieldBoxShow">
      <CollapseContent :fieldList="sheet.columns" :sheetName="sheet.showName"></CollapseContent>
    </div>

    <el-dialog title="修改表名" :visible.sync="changeSheetNameBoxVisible" width="30%">
      <el-input placeholder="请输入表名" v-model="sheetName"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeSheetNameBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeSheetName">确 定</el-button>
      </span>
    </el-dialog>

    
    <el-dialog title="删除表格" :visible.sync="removeSheetBoxVisible" width="30%">
      <span>您确定要删除表格"{{sheet.showName}}"吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="removeSheetBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeSheet">确 定</el-button>
      </span>
    </el-dialog>

    <filter-sheet-box 
    :filterSheetBoxVisible="filterSheetBoxVisible"
    :json="sheet.json"
    :types="sheet.types"
    :sheetName="sheet.showName"
    v-on:set-filter-sheet-box-visible="setFilterSheetBoxVisible">
    </filter-sheet-box>
  </div>
</template>

<script>
// import $ from "jquery";
import CollapseContent from "@/components/common/CollapseContent.vue";
import FilterSheetBox from "@/components/FilterSheetBox.vue"
export default {
  components: {
    CollapseContent,
    FilterSheetBox
  },
  props: ["sheet"],
  data() {
    return {
      sheetName: "",
      changeSheetNameBoxVisible: false,
      removeSheetBoxVisible: false,
      filterSheetBoxVisible: false,
      moreBoxShow: false,
      fieldBoxShow: false,
      moreBoxWidth: 0,
    };
  },
  methods: {
    showFeildBox() {
      this.moreBoxShow = false;
      this.fieldBoxShow = !this.fieldBoxShow;
    },
    showMore() {
      this.moreBoxShow = !this.moreBoxShow;
    },
    showChangeSheetName() {
      this.changeSheetNameBoxVisible = true
      this.sheetName = this.sheet.showName

      this.showMore();
    },
    showRemoveSheet() {
      this.removeSheetBoxVisible = true
      this.showMore();
    },
    showFilterSheet() {
      this.filterSheetBoxVisible = true
      this.showMore();
    },

    changeSheetName(){
      if(this.sheetName == ""){
        this.$message.error("表名不能为空")
        return
      }

      if(this.sheet.showName == this.sheetName){  //判断是否有修改表名
        this.$message.error("输入的表名不能为现有表名！")
        return
      }

      let res = this.$emit('change-sheet-name', this.sheet.showName, this.sheetName)
      this.changeSheetNameBoxVisible = false

      console.log(res)
    },
    removeSheet(){
      this.$emit('remove-sheet', this.sheet.showName)
    },

    setFilterSheetBoxVisible(val){
      this.filterSheetBoxVisible = val
    },
  },
  mounted() {},
};
</script>

<style scoped>
.collapse-box{
}

.collapse {
  display: flex;

  justify-content: space-between;
  align-items: center;

  padding: 8px;
  border-bottom: 1px solid black;
}

.collapse:hover {
  background-color: rgb(95, 94, 94);
}

.collapse img {
  width: 20px;
}

.more {
  position: relative;
}

.moreBox {
  user-select: none;
  position: absolute;
  background-color: white;
  color: black;

  width: 150px;

  border: 1px solid black;

  left: -128px;

  z-index: 10;
}

.moreBox > div {
  text-align: center;
  padding: 4px;
}

.moreBox > div:hover {
  background-color: rgb(95, 94, 94);
}

/* .fieldBox{
  max-height: 200px;
  overflow-y:scroll;
} */
</style>